<template>
	<view class="search">
		<view class="search_bar">
			<van-search
			  :value="searchValue"
			  placeholder="请输入搜索关键词"
			  use-action-slot
			  @focus="onSearchFocus"
			  @blur="onSearchBlur"
			  @change="onChange"
			  @search="onSearch"
			>
			  <view slot="action" @click="onSearch">搜索</view>
			</van-search>
		</view>
		
		<!-- hot -->
		<view class="hot" v-if="tabShow">
			<van-tabs @click="onTabClick">
			  <van-tab title="热门类目">
				 
			  </van-tab>
			  <van-tab title="热门店铺">
				 
			  </van-tab>
			</van-tabs>
		</view>
	</view>
</template>

<script>
	import Notify from '../../static/dist/notify/notify';
	export default {
		data() {
			return {
				searchValue: "",
				tabShow: true,
				searchList: [],
			}
		},
		methods:{
			//  search 变化
			onChange( value ) {
				console.log(value.detail);
				this.searchValue = value.detail
			},
			
			// 点击搜索
			onSearch( value ) {
				console.log(this.searchValue);
			},
			// focus
			onSearchFocus( e ) {
				// console.log(1);
				this.tabShow = false
			},
			// blur
			onSearchBlur(e) {
				if(this.searchList.length > 0) {
					this.tabShow = false
				} else {
					this.tabShow = true
				}
			},
			// dianji tab
			onTabClick( e ) {
				console.log(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		width: 100%;
		box-sizing: border-box;
	}
</style>
